import { Button, CenterPopup, Space } from 'antd-mobile'
import { ExclamationCircleFill, InformationCircleFill } from 'antd-mobile-icons'
import styles from './index.module.less'
import { getLocalStorage } from '@/storage'

interface ConfirmModalProps {
    visible: boolean
    /** 1-清空，2-已生成，3-同步，4-返回 */
    type: '1' | '2' | '3' | '4' | string
    handleCancel: () => void
    handleOk?: () => void
}

export default (props: ConfirmModalProps) => {
    const { visible, type, handleCancel, handleOk } = props || {}

    /** 1-学员，2-讲师 */
    const identityType = getLocalStorage('IDENTITY_TYPE')

    const detailObj: Record<string, any> = {
        '1': {
            content: '是否清空当前彩虹图',
            leftBtn: (
                <Button size="small" onClick={handleCancel}>
                    取 消
                </Button>
            ),
            rightBtn: (
                <Button color="primary" size="small" onClick={handleOk}>
                    确 定
                </Button>
            ),
        },
        '2': {
            content: '已生成我的求职档案',
            leftBtn: (
                <Button size="small" color={identityType === 1 ? 'default' : 'primary'} onClick={handleCancel}>
                    好 的
                </Button>
            ),
            rightBtn: identityType === 1 && (
                <Button color="primary" size="small" onClick={handleOk}>
                    前往档案
                </Button>
            ),
        },
        '3': {
            content: '同步我的实训结果生成档案',
            leftBtn: (
                <Button size="small" onClick={handleCancel}>
                    取 消
                </Button>
            ),
            rightBtn: (
                <Button color="primary" size="small" onClick={handleOk}>
                    同步档案
                </Button>
            ),
        },
        '4': {
            content: (
                <>
                    <span>还未提交生成生涯彩虹图</span>
                    <span style={{ display: 'block', color: '#999', marginTop: '8px' }}>直接退出不会保存修改</span>
                </>
            ),
            leftBtn: (
                <Button size="small" onClick={handleOk}>
                    退 出
                </Button>
            ),
            rightBtn: (
                <Button color="primary" size="small" onClick={handleCancel}>
                    取 消
                </Button>
            ),
        },
    }
    return (
        <CenterPopup visible={visible} getContainer={() => document.getElementById('cv_container') || document.body}>
            <div className={styles.dialog_box}>
                <div className={styles.content}>
                    {['1', '3', '4'].includes(type) ? <ExclamationCircleFill color="var(--adm-color-warning)" /> : <InformationCircleFill color="var(--adm-color-primary)" />}
                    <p>{detailObj[type].content}</p>
                </div>
                <div className={styles.footer}>
                    <Space>
                        {detailObj[type].leftBtn}
                        {detailObj[type].rightBtn}
                    </Space>
                </div>
            </div>
        </CenterPopup>
    )
}
